<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程概览</title>
    <link rel="stylesheet" href="./static/css/overView.css"/>
    <link rel="stylesheet" href="./static/css/common.css"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <link rel="stylesheet" href="./static/css/font-awesome.min.css">
    <script src="./static/js/jquery-3.4.1.min.js"></script>
    <script>
        function display_sub(key, o) {
            $(o).parent().siblings(".sub-panel").each((index, e) => {
                if(index === key) {
                    $(e).css("display", "inline");
                }else {
                    $(e).css("display", "none");
                }
            })
        }
        function change_style_2(key, o) {
            $(o).attr("ondrag", "void(0)");
            $(o).siblings(".table").each((index, e) => {
                $(e).removeAttr("ondrag");
            })
        }
    </script>
</head>
<body>
    <div id="header" class="located font-20">
        <div id="header_left" class="flow">
            <table cellspacing="0" cellpadding="0" style="height: 80px;">
                <tr>
                    <td><div class="table_cell bgc-d-blue"><a href="http://127.0.0.1:5500/mainPage.html" class="bgc-black">首页</a></div></td>
                    <td><div class="table_cell"><a href="javascript:void(0)" class="bgc-black">我的课程</a></div></td>
                    <td><div class="table_cell"><a href="javascript:void(0)" class="bgc-black">社区</a></div></td>
                </tr>
            </table>
        </div>
        <div id="header_right" class="flow">
            <table cellspacing="0" cellpadding="0" style="height: 80px;">
                <tr>
                    <td><div class="table_cell"><a href="javascript:void(0)" class="bgc-black">欢迎XXX</a></div></td>
                    <td><div class="table_cell"><a href="javascript:void(0)" class="bgc-black"><i class="fa fa-cog fa-fw"></i>我的</a></div></td>
                </tr>
            </table>
        </div>
    </div>
    <div id="head_overview" class="located" style="margin-top: 80px; ">
        <div id="head_overview_img"><img src="./static/image/classes/1.jpg"/></div>
        <div id="head_overview_body">
            <div class="located" style="width: 100%;height: 100%;">
                <div class="font-30">操作系统原理</div>
                <div class="bottom">
                    <div class="font-12">已有10023人参加</div>
                    <div class="font-25">立即参加</div>
                    <div class="font-25" style="left: 220px;">加入收藏</div>
                </div>
            </div>
        </div>
        <div id="head_overview_share">
            分享
            <i class="fa fa-qq"></i>
            <i class="fa fa-wechat"></i>
            <i class="fa fa-weibo"></i>
        </div>
    </div>
    <div id="backgrand" class="located">
        <div id="body" class="flow">
            <div class="head located">
                <div class="flow font-20 table" style="left: 0;" onclick="change_style_2(0, this); display_sub(0, this)" ondrag="">课程详情</div>
                <div class="flow font-20 table" style="left: 165px;" onclick="change_style_2(1, this); display_sub(1, this)">课程评价(102)</div>
                <div class="divider flow bgc-l-blue-2" style="left: 150px;"></div>
                <div class="divider-flat flow"></div>
            </div>
            <div class="sub-panel" style="">
                <div class="sub-head" style="margin-top: 20px;"><i class="fa fa-folder-open"></i>&nbsp;课程概述</div>
                <p class="textarea">《操作系统原理》主要内容包括：操作系统绪论、进程管理、内存管理、设备管理、文件系统等核心内容。通过理论学习和实践环节，能掌握操作系统的结构与设计，能分析和设计简单的操作系统，为从事科学研究和工程研发打下坚实的理论基础。通过实践教学环节，使学生初步掌握阅读、分析和裁剪现有开源操作系统的能力；具备设计、实现、开发小型或简化的操作系统的基础；培养大型程序设计的方法和技巧，提高学生编制清晰、合理、可读性好的系统程序。课程讲解概念清晰，内容丰富，通俗易懂，实践性与实用性都很强。每章课后有大量的习题和开放性思考题，有大量有针对性的课后上机编程实验。</p>
                <div class="sub-head"><i class="fa fa-graduation-cap"></i>&nbsp;课程目标</div>
                <p class="textarea">掌握操作系统的基本概念、核心原理、关键技术。通过理论学习和实践环节，能掌握操作系统的结构与设计，能分析和设计简单的操作系统，使学生初步掌握阅读、分析和裁剪现有开源操作系统的能力；具备设计、实现、开发小型或简化的操作系统的基础；培养大型程序设计的方法和技巧，提高学生编制清晰、合理、可读性好的系统程序。</p>
                <div class="sub-head"><i class="fa fa-book"></i>&nbsp;课程大纲</div>
                <div class="class-list">
                    <div class="chapter">
                        <div>第一章 操作系统概述</div>
                        <div class="sub-chapter">1.1 操作系统的初步认识</div>
                        <div class="sub-chapter">1.2 操作系统的功能和定义</div>
                    </div>
                    <div class="chapter">
                        <div>第二章 操作系统逻辑结构</div>
                        <div class="sub-chapter">2.1 操作系统逻辑结构</div>
                        <div class="sub-chapter">2.2 CPU的态</div>
                    </div>
                </div>
            </div>
            <div class="sub-panel" style="display: none;">
                <div style="width: 100%; margin-top: 10px;">
                    <div style="width: 100%; height: 100px;">
                        <form id="comment_form">
                            <textarea name="comment"></textarea>
                            <input type="submit" value="提交评论"/>
                        </form>
                    </div>
                    <div class="comments located">
                        <div class="comment located">
                            <div style="width: 50px; height: 100%;"><img src="./static/image/head_black.png" /></div>
                            <div class="comment-body">
                                <div style="font-size: 15px;">第二个mt</div>
                                <p>这老师长得帅，说话还好听，ppt也做的好，讲得也是通俗易懂，感觉是整个mooc操作系统最好的课程了，唯一的缺点就是感觉不太深入，不过已经相当不错了，很是谢谢相关人员的精心准备的这个教学视频了</p>
                                <div class="located">
                                    <div class="flow time">发表于2020-6-21</div>
                                    <div class="flow thumbs"><i class="fa fa-thumbs-up"></i>&nbsp;26</div>
                                </div>
                            </div>
                        </div>
                        <div class="comment located">
                            <div style="width: 50px; height: 100%;"><img src="./static/image/head_black.png" /></div>
                            <div class="comment-body">
                                <div style="font-size: 15px;">第三个mt</div>
                                <p>名校老师讲课就是牛。看了几门OS课程，能把OS前2章枯燥的基础概念讲的生动出彩，就是牛！老师没有照本宣科或念台词，也没有照念PPT，胸有成竹，例子信手拈来，非常棒！从这一点比较，这个老师的功力明显甩其他老师几条街。</p>
                                <div class="located">
                                    <div class="flow time">发表于2020-6-21</div>
                                    <div class="flow thumbs"><i class="fa fa-thumbs-up"></i>&nbsp;11</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="teachers" class="flow">
            <div class="head located">
                <div class="flow font-20 table" style="left: 15px; width: 120px;">1位授课老师</div>
                <div class="divider flow bgc-l-blue-2" style="left: 0;"></div>
                <div class="divider-flat flow"></div>
            </div>
            <div class="teacher">
                <img class="normal-user-head" src="./static/image/head_black.png" />
                <div>
                    <div>第一个mt</div>
                    <div>教授</div>
                </div>
            </div>
            <div id="attend_class_modify">申请参与课程制作</div>
        </div>
        <div id="relative" class="flow">
            <div class="head located">
                <div class="flow font-20 table" style="left: 15px; width: 100px;">相关课程</div>
                <div class="divider flow bgc-l-blue-2" style="left: 0;"></div>
                <div class="divider-flat flow"></div>
            </div>
            <div class="class_overview">
                <img src="./static/image/classes/1.jpg"/>
                <div class="font-15">操作系统原理</div>
                <div class="font-12" style="bottom: 20px;">第一个mt教授</div>
                <div class="font-12">1234567人参加</div>
            </div>
        </div>
    </div>
</body>
</html>